<template>
  <div class="machine-detail">
    <!--    ip-->
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">IP</div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content bg-purple-light">{{machineInfo.ip}}</div>
      </el-col>
      <el-col :span="6">
        <div v-if="machineInfo.alive === 'y'" class="el-icon-success" style="color: greenyellow"></div>
        <div v-else class="el-icon-error" style="color: red"></div>
      </el-col>
    </el-row>
    <!--    CPU-->
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">CPU</div>
      </el-col>
      <el-col :span="12">
        <el-progress v-if="machineInfo.cpu_usage < 50" status="success"
                     style="width: 100px;display: inline-block" :text-inside="true" :stroke-width="14"
                     :percentage="Number(machineInfo.cpu_usage)"></el-progress>
        <el-progress v-else-if=" 50< machineInfo.cpu_usage < 70" status="warning"
                     style="width: 100px;display: inline-block" :text-inside="true" :stroke-width="14"
                     :percentage="Number(machineInfo.cpu_usage)"></el-progress>
        <el-progress v-else status="exception" style="width: 100px;display: inline-block" :text-inside="true"
                     :stroke-width="14" :percentage="Number(machineInfo.cpu_usage)"></el-progress>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">{{machineInfo.cpu_num}}核</div>
      </el-col>
    </el-row>
    <!--    磁盘-->
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">磁盘</div>
      </el-col>
      <el-col :span="12">
        <el-progress v-if="machineInfo.disk_usage < 50" status="success"
                     style="width: 100px;display: inline-block" :text-inside="true" :stroke-width="14"
                     :percentage="Number(machineInfo.disk_usage)"></el-progress>
        <el-progress v-else-if=" 50< machineInfo.disk_usage < 70" status="warning"
                     style="width: 100px;display: inline-block" :text-inside="true" :stroke-width="14"
                     :percentage="Number(machineInfo.disk_usage)"></el-progress>
        <el-progress v-else status="exception" style="width: 100px;display: inline-block" :text-inside="true"
                     :stroke-width="14" :percentage="Number(machineInfo.disk_usage)"></el-progress>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">{{currentMachineTotalDisk}}</div>
      </el-col>
    </el-row>
    <!--    内存-->
    <el-row>
      <el-col :span="6">
        <div class="grid-content bg-purple">内存</div>
      </el-col>
      <el-col :span="12">
        <el-progress v-if="machineInfo.memory_usage < 50" status="success"
                     style="width: 100px;display: inline-block" :text-inside="true" :stroke-width="14"
                     :percentage="Number(machineInfo.memory_usage)"></el-progress>
        <el-progress v-else-if=" 50< machineInfo.memory_usage < 70" status="warning"
                     style="width: 100px;display: inline-block" :text-inside="true" :stroke-width="14"
                     :percentage="Number(machineInfo.memory_usage)"></el-progress>
        <el-progress v-else status="exception" style="width: 100px;display: inline-block" :text-inside="true"
                     :stroke-width="14" :percentage="Number(machineInfo.cpu_usage)"></el-progress>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple-light">{{currentMachineTotalMemory}}</div>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  export default {
    name: "MachineDetail",
    props: {
      machineInfo: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    data(){
      return {
        currentMachineTotalMemory:'',
        currentMachineTotalDisk:''
      }
    },
    mounted() {
      this.currentMachineTotalMemory = this.machineInfo.memory_total / Math.pow(1024, 2)
      this.currentMachineTotalMemory = this.currentMachineTotalMemory.toFixed(0) + 'GB'
      this.currentMachineTotalDisk = this.machineInfo.disk_total / Math.pow(1024, 3)
      this.currentMachineTotalDisk = this.currentMachineTotalDisk.toFixed(2) + 'TB'
    }
  }
</script>

<style scoped>
  .el-row {
    margin-top: 8px;
    /*&:last-child {*/
    /*  margin-bottom: 0;*/
    /*}*/
  }
  .el-col {
    border-radius: 4px;
  }
  .machine-detail {
    color: #ffffff;
    border-radius: 3px;
  }
</style>